<template>
  <div class="m-campus-charge">
    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
      <div class="widget am-cf">
        <div class="widget-head am-cf">
          <div class="widget-title  am-cf">营收预测</div>
        </div>
        <div class="widget-body  am-fr">
          <customer-toolbar
            ref="toolbar"
            class="toolbar"
            @search="handleFind"
            areaTeam
            needPeriods
            busTeam
            needInitSearch
            :needTimes="['countStartTime', 'countEndTime']"
            hasExport
            @export="goExport"
          ></customer-toolbar>

          <div>

            <el-table
              :data="tableData"
              border
              ref="table"
              stripe
              style="width: 100%"
              maxHeight="600"
              empty-text="暂无数据"
              :showSummary="true"
              :summaryMethod="summary"
            >
              <el-table-column
                label="统计开始时间"
                min-width="200"
              >
                <template scope="scope">
                  <div v-if="scope.row.countStartTime !== '汇总'">
                    {{ scope.row.countStartTime }}
                  </div>
                  <div v-else>
                    {{scope.row.countStartTime}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                label="统计结束时间"
                min-width="200"
              >
                <template scope="scope">
                  <div>
                    {{scope.row.countEndTime }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="areaTeamName"
                label="区域"
                min-width="100"
              >
              </el-table-column>
              <el-table-column
                prop="busTeamName"
                label="业务组"
                min-width="160"
              >
              </el-table-column>
              <el-table-column
                prop="periodName"
                label="期数"
                min-width="120"
              >
              </el-table-column>
              <el-table-column
                prop="gradeName"
                label="年级"
                min-width="100"
              >
              </el-table-column>
              <el-table-column
                prop="subjectName"
                label="科目"
                min-width="80"
              >
              </el-table-column>

              <el-table-column
                prop="campusName"
                label="校区"
                min-width="200"
              >
              </el-table-column>

              <el-table-column
                prop="classNo"
                label="班级编号"
                min-width="100"
              >
              </el-table-column>

              <el-table-column
                prop="className"
                label="班级名称"
                min-width="200"
              >
              </el-table-column>

              <el-table-column
                label="已缴金额"
                prop="realAmount"
                min-width="160"
              >
              </el-table-column>
              <el-table-column
                prop="lectureAmount"
                label="班级总讲次"
                min-width="120"
              >
              </el-table-column>
              <el-table-column
                prop="attendLectureAmount"
                label="上课讲次"
                min-width="100"
              >
              </el-table-column>
              <el-table-column
                prop="income"
                label="营收"
                min-width="160"
              >
              </el-table-column>

            </el-table>

          </div>
          <div class="am-u-lg-12 am-cf">

            <div
              class="am-fr"
              style="margin-top:10px;color:#000"
            >
              共{{total}}条
            </div>
          </div>

        </div>
      </div>
    </div>

  </div>
</template>
<script>
import io from "../../lib/io";
import moment from "moment";
import util from "../../lib/util";
import CustomerToolbar from "../potentialcustomer/CustomerToolbar.vue";

export default {
  data: function() {
    return {
      tableData: [],
      allData: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      sumCart: 0,
      sumBalance: 0,
      sumWX: 0,
      sumZFB: 0,
      sumOther: 0,
      query: {},
      searchConfig: {},
      products: [],
      selection: [],
      periods: [],
      summaryRow: []
    };
  },
  components: {
    CustomerToolbar
  },
  mounted: function() {
    this.query.chargeCampusId = window.config.campusList[0]
      ? window.config.campusList[0].campusId
      : "";
    this.loadProductData();
  },
  computed: {
    dailyCheckWidth() {
      return this.hasPermission("cancel_daily_check") ? 140 : 80;
    },
    campusList: function() {
      var options = (this.$root.config.campusList || []).map(function(item) {
        return { value: item.campusId, text: item.campusName };
      });
      return options;
    }
  },
  watch: {
    "query.areaTeamId": function() {
      this.loadPeriodData();
    }
  },
  methods: {
    summary(param) {
      let {columns} = param
      let sum = [];
      columns.forEach((item, index) => {
        if(index === 0){
           sum[index] = '汇总'
        } else if(item.property === 'income'){
           sum[index] = this.summaryRow.income
        } else if(item.property === 'attendLectureAmount'){
           sum[index] = this.summaryRow.attendLectureAmount
        } else if(item.property === 'lectureAmount'){
           sum[index] = this.summaryRow.lectureAmount
        } else if(item.property === 'realAmount'){
           sum[index] = this.summaryRow.realAmount
        } else {
           sum[index] = ''
        }
      })
      return sum;
    },
    goExport(data) {
      let formdata = this.filterFormData(data);
      if (!formdata.areaTeamId) {
        this.$alert("请选择区域");
        return;
      }
      if (!formdata.countStartTime || !formdata.countEndTime) {
        this.$alert("请选择时间");
        return;
      }
      io.downloadFile(io.exportClassPreIncome, { ...formdata });
    },
    filterFormData(data) {
      return {
        countStartTime: data.countStartTime,
        countEndTime: data.countEndTime,
        areaTeamId: data.areaTeamId,
        periodId: data.periodId,
        busTeamId: data.busTeamId
      };
    },
    handleFind() {
      this.loadTableData(1);
    },
    loadTableData: function(pageNo) {
      var _this = this;
      _this.pageNo = pageNo || _this.pageNo || 1;
      let data = this.filterFormData({ ...this.$refs.toolbar.query });
      if (!data.areaTeamId) {
        this.$alert("请选择区域");
        return;
      }
      if (!data.countStartTime || !data.countEndTime) {
        this.$alert("请选择时间");
        return;
      }
      _this.$showLoading();
      io.post(io.countClassPreIncome, { ...data }, function(ret) {
        _this.$hiddenLoading();
        if (ret.success) {
          _this.tableData = ret.data || [];
          _this.summaryRow = ret.data.pop() || {};
          _this.total = _this.tableData.length;
        } else {
          _this.$alert(ret.desc);
        }
      });
    },
    handlePage(pageNo) {
      this.pageNo = pageNo || this.pageNo || 1;
      this.tableData = this.allData.slice(
        (this.pageNo - 1) * this.pageSize,
        this.pageSize * this.pageNo
      );
    },
    loadProductData: function() {
      var _this = this;
      io.post(io.apiAdminBaseProductList, {}, function(ret) {
        if (ret.success) {
          _this.products = ret.data.map(function(item) {
            return { value: item.productId, text: item.name };
          });
        } else {
          _this.$alert(ret.desc);
        }
      });
    },

    exportExcel: function() {
      io.downloadFile(
        io.exportCampusCharge,
        $.extend(this.query, {
          startDate: moment(this.query.startDate).format("YYYY-MM-DD"),
          endDate: moment(this.query.endDate).format("YYYY-MM-DD")
        })
      );
    },
    loadPeriodData: function() {
      var _this = this;
      io.post(
        io.apiAdminPeriodListForAreaTeam,
        {
          areaTeamId: this.query.areaTeamId
        },
        function(ret) {
          if (ret.success) {
            _this.periods = ret.data.map(function(item) {
              return { value: item.periodId, text: item.periodName };
            });
            _this.query.periodId = ret.data.filter(
              item => item.isCurrent == 1
            )[0].periodId;
            _this.$emit("period.loaded");
          } else {
            _this.$alert(ret.desc);
          }
        }
      );
    }
  }
};
</script>
<style lang="less">
.m-campus-charge {
  .am-form {
    & > .am-u-sm-12:nth-child(4n + 1) {
      clear: both;
    }
  }
  .totalSum {
    color: #333333;
    text-align: center;
  }
  .table {
    max-height: 650px;
    overflow-y: scroll;
  }
  .sum {
    font-weight: bold;
    color: #333333;
  }
}
</style>
